<template>
	<div class='app-container'>
		<el-row :gutter="10">
			<el-col :lg='24' class='card-box' v-if='server.cpu'>
				<el-card class='box-card'>
					<template #header>
						<span>状态--此功能页面与后台从项目 <a target='_blank' style='color: green;' href='https://gitee.com/izory'>ZrAdminNet</a> 拷贝，感谢大佬</span>
					</template>

					<el-row>
						<el-col :xs='24' :sm='12' :md='8' :lg='6' :xl='4'>
							<div class='title'>CPU使用率</div>
							<div class='content'>
								<el-progress type='dashboard' :percentage='parseFloat(server.cpu.cpuRate)' />
							</div>
							<div class='footer' v-if='server.sys'>{{ server.sys.cpuNum }} 核心</div>
						</el-col>

						<el-col :xs='24' :sm='12' :md='8' :lg='6' :xl='4'>
							<div class='title'>内存使用率</div>
							<el-tooltip placement='top-end'>
								<template #content>
									<div style='font-size: 12px'>
										<div style='padding: 3px'>总量：{{ server.cpu.totalRAM }}</div>
										<div style='padding: 3px'>已使用：{{ server.cpu.usedRam }}</div>
										<div style='padding: 3px'>空闲：{{ server.cpu.freeRam }}</div>
									</div>
								</template>

								<div class='content'>
									<el-progress type='dashboard' :percentage='parseFloat(server.cpu.ramRate)' />
								</div>
							</el-tooltip>
							<div class='footer'>{{ server.cpu.usedRam }} / {{ server.cpu.totalRAM }}</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>

			<el-col :lg='24' class='card-box' style="margin-top: 6px">
				<el-card>
					<template #header>
						<span>磁盘状态</span>
					</template>
					<el-row>
						<el-col :xs='24' :sm='12' :md='8' :lg='6' :xl='4' v-for='sysFile in server.disk' :key='sysFile.diskName'>
							<div class='title'>{{ sysFile.diskName }}盘使用率</div>
							<div class='content'>
								<el-tooltip placement='top-end'>
									<template #content>
										<div style='font-size: 12px'>
											<div style='padding: 3px'>总量：{{ sysFile.totalSize }}GB</div>
											<div style='padding: 3px'>空闲：{{ sysFile.availableFreeSpace }}GB</div>
											<div style='padding: 3px'>已用：{{ sysFile.used }}GB</div>
										</div>
									</template>
									<div class='content'>
										<el-progress type='dashboard' :percentage='parseFloat(sysFile.availablePercent)' />
									</div>
								</el-tooltip>
							</div>
							<div class='footer'>{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>

			<el-col :lg='24' class='card-box' style="margin-top: 6px">
				<el-card>
					<template #header>
						<div class='card-header'>
							<span>服务器信息</span>
						</div>
					</template>
					<div class='el-table el-table--enable-row-hover el-table--medium'>
						<table cellspacing='0' style='width: 100%' v-if='server.sys'>
							<tbody>
							<tr>
								<td>
									<div class='cell'>服务器名称</div>
								</td>
								<td>
									<div class='cell'>{{ server.sys.computerName }}</div>
								</td>
								<td>
									<div class='cell'>操作系统</div>
								</td>
								<td>
									<div class='cell'>{{ server.sys.osName }}</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class='cell'>服务器IP</div>
								</td>
								<td>
									<div class='cell'>{{ server.sys.serverIP }}</div>
								</td>
								<td>
									<div class='cell'>系统架构</div>
								</td>
								<td>
									<div class='cell'>{{ server.sys.osArch }}</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class='cell'>系统运行时长</div>
								</td>
								<td>
									<div class='cell'>{{ server.sys.runTime }}</div>
								</td>
								<td>
									<div class='cell'></div>
								</td>
								<td>
									<div class='cell'></div>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
				</el-card>
			</el-col>

			<el-col :lg='24' class='card-box' style="margin-top: 6px">
				<el-card>
					<template #header>
						<span>.NET Core信息</span>
					</template>
					<div class='el-table el-table--enable-row-hover el-table--medium'>
						<table cellspacing='0' style='width: 100%'>
							<tbody>
							<tr>
								<td>
									<div class='cell'>环境变量</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.name }}</div>
								</td>
								<td>
									<div class='cell'>.Net版本</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.version }}</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class='cell'>启动时间</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.startTime }}</div>
								</td>
								<td>
									<div class='cell'>运行时长</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.runTime }}</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class='cell'>占用内存</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.appRAM }}</div>
								</td>
								<td>
									<div class='cell'>启动地址</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.host }}</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class='cell'>ContentRootPath</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.rootPath }}</div>
								</td>
								<td>
									<div class='cell'>webPath</div>
								</td>
								<td>
									<div class='cell' v-if='server.app'>{{ server.app.webRootPath }}</div>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue';
import request from '/@/utils/request';
import { ElLoading } from 'element-plus';


const state = reactive({
	url: '/mon/server/main', loading: true, ids: [], cates: [] as any,
	single: true, multiple: true, list: [], total: 0,
});


// 服务器信息
const server = ref([]) as any;
// const intervalId = ref(null)
// const { proxy } = getCurrentInstance()

onMounted(async () => {
	const loading = ElLoading.service({
		lock: true,
		fullscreen: true,
		text: '正在获取服务器监控数据，请稍等',
		background: 'rgba(0, 0, 0, 0.5)',
	});
	server.value = await request({
		url: state.url,
		method: 'get',
	}).catch(() => {
		loading.close();
	});
	loading.close();
	// const canSubmit = await checkSubmit(data.formRef);
	// if (!canSubmit) {
	//
	//   return false;
	// }
});


</script>
<style scoped>
table tr {
	height: 30px;
}

.is-leaf {
	text-align: center;
	padding: 0 10px;
}

.title {
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	color: #999;
	margin-bottom: 16px;
}

.footer {
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	color: #999;
	margin-top: -5px;
	margin-bottom: 10px;
}

.content {
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
}
</style>
